<template>
  <div class="mycarousel-container">
    <!--以下是轮播组件的开始-->
    <!--巨幕-->
    <el-carousel trigger="click" style="width: 100%">
      <el-carousel-item v-for="(item,index) in carouselItemsList" :key="index"
                        :style="{backgroundImage:'url(' + item.img + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center top', backgroundSize: 'cover'}">
        <div class="jumbotron">
          <div class="bg" style="height:300px">
            <h1>{{ item.title }}</h1>
            <div style="margin: 0px auto; width: 50%;">
              <el-divider style="width: 600px"></el-divider>
            </div>
            <el-button type="success" round plain>开始学习</el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!--轮播组件的结束-->
  </div>
</template>

<script>
export default {
  name: "MyCarousel",
  data(){
    return{
      //轮播组件使用的巨幕图片数组对象
      carouselItemsList: [
        {
          title: '轮播图广告标题1',
          actionUrl: '#',
          img: 'https://img.simoniu.com/elementdemo_project_bg_001.jpg',
        },
        {
          title: '轮播图广告标题2',
          actionUrl: '#',
          img: 'https://img.simoniu.com/elementdemo_project_bg_002.png',
        },
        {
          title: '轮播图广告标题3',
          actionUrl: '#',
          img: 'https://img.simoniu.com/elementdemo_project_bg_004.jpg',
        }
      ]
    }
  }
}
</script>

<style scoped>

.mycarousel-container {
  margin-top: 60px;
}

.jumbotron {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}

.bg h1 {
  padding: 0px;
  margin: 60px;
  font-size: 40pt;
  text-shadow: 2px 2px 2px #999999;
  color: #FFF;
}

.bg h3 {
  padding: 0px;
  margin: 0px;
  font-size: 20pt;
  color: #FFF;
}
</style>